<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>我的订单</title>
	<link rel="stylesheet" type="text/css"  href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}" />
	<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}" />
	<link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" th:href="@{/css/bootstrap-datetimepicker.min.css}"/>
	<link rel="stylesheet" type="text/css" href="css/order_list.css" th:href="@{/css/order_list.css}"/>
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">

</head>

	<body>
	<!--导航部分  begin-->
	<div th:replace="common/header :: nav"></div>
	<!--导航部分 end-->

	<!--最顶端轮播图片 begin-->
	<div th:replace="common/carousel :: carousel"></div>
	<!--最顶端轮播图片 end-->

		<!--订单begin-->
		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="container pull-left">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;我的订单</a>
					</li>
				</ol>

				<!--订单查询导航 begin-->
				<div>
					<nav class="navbar navbar-default" role="navigation">
						<div class="navbar-header">
							<a class="navbar-brand" href="#">所有订单</a>
						</div>

						<form class="navbar-form navbar-left" role="search" >
							<input type="text" class="form-control" id="queryOrderNum" placeholder="输入订单号进行查询">
							<button type="button" class="btn btn-search" th:onclick="queryOrderData()">
			                  	<span class="text-success"></span>&nbsp;&nbsp;<span class="glyphicon glyphicon-search"></span>
			            	</button>
						</form>

						<ul class="nav navbar-nav navbar-left">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									订单状态
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderStatus('')">全部</a>
									</li>
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderStatus('1')">未付款</a>
									</li>
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderStatus('2')">待发货</a>
									</li>
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderStatus('4')">已取消</a>
									</li>
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderStatus('5')">待收货</a>
									</li>
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderStatus('6')">已收货</a>
									</li>
								</ul>
							</li>
						</ul>



						<ul class="nav navbar-nav navbar-left">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									订单排序
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderBy('desc')">订单日期降序</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="javascript:void(0)" th:onclick="queryOrderBy('asc')">订单日期升序</a>
									</li>
									<li class="divider"></li>
								</ul>
							</li>
						</ul>
<!--						<ul class="nav navbar-nav navbar-right">
							<li style="padding-right: 15px;">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">更多筛选条件</a>
							</li>
						</ul>-->
						
						<ul class="nav navbar-nav">
							<li>
								<a href="#" th:onclick="orderDelete()" >删除订单</a>
							</li>
						</ul>
						<ul class="nav navbar-nav">
							<li>
								<a href="#" th:onclick="deleteAll()">清空订单</a>
							</li>
						</ul>
<!--						<ul class="nav navbar-nav">
							<li>
								<a href="#" th:onclick="returnAndExchange()">退换货详情</a>
							</li>
						</ul>-->
					</nav>
				</div>
				
				<!--订单查询导航 end-->
				<!--日期控件-->
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						<div class="form-group">	
							<div>
								<form class="form-horizontal">
							  		<div class="form-group has-feedback">
							  			<div class="col-md-1" style="padding-top:5px ;">
							  				成交日期:
							  			</div>
										<div class="col-md-3">
											<input type="text" class="form-control" id="datetimepicker" placeholder="开始时间">
											<span class="glyphicon glyphicon-time form-control-feedback"></span>
										</div>
										<div class="col-md-1" style="padding-top:5px ;text-align:center;">
							  				至
							  			</div>
										<div class="col-md-3">
											<input type="text" class="form-control" id="datetimepicker2" placeholder="结束日期">
											<span class="glyphicon glyphicon-time form-control-feedback"></span>
										</div>
										<div class="col-md-3">
											<button type="button" class="btn btn-default">查询&nbsp;&nbsp;<span class="glyphicon glyphicon-search"></span></button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<!--日期控件-->
				
				<!--内容展示 begin-->
				<div id="orderData"></div>
				<!--内容展示end-->
			</div>

		</div>
		<div class="container">
		<hr>
			<!--首页底部信息 begin-->
			<div th:replace="common/footer :: footer"></div>
		</div>
		<!--end-->
		<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
		<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
		<script src="js/moment.js" th:src="@{/js/moment.js}" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-datetimepicker.js" th:src="@{/js/bootstrap-datetimepicker.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/layui/layui.js}"></script>

	<script th:inline="javascript">
			//获取应用路径
			var contextPath = [[${#request.getContextPath()}]];
		</script>
		<script type="text/javascript">
			$(function () {
				$('#datetimepicker').datetimepicker({
					format: 'YYYY-MM-DD',
					locale: moment.locale('zh-cn')
				});
				$('#datetimepicker2').datetimepicker({
					format: 'YYYY-MM-DD',
					locale: moment.locale('zh-cn')
				});
			})
		</script>

		<script>
		//删除多个订单
		function orderDelete() {
			//存储购物记录的id
			var ids = '';
			var thirdModel = document.getElementById("third_del");
			//判断是否选择了商品
			var count = 0;
			//获取所有的checkbox
			var cks = document.getElementsByName("cks");
			//遍历
			for(var i = 0; i < cks.length; i++) {
				if(cks[i].checked) {
					count++;
					ids += cks[i].value + ",";
				}
			}
			if(count == 0) {
				layer.msg('请勾选订单！', {icon: 7,anim:6});
				return;
			} else {
				$.ajax({
					url:contextPath + "/order/orderDelete",
					method:"post",
					data:{"ids":ids.substring(0,ids.length-1)},
					success:function (data) {
						if (data == 'success'){
							layer.msg('删除成功！',{time:2000});
							window.location.href = contextPath + "/order/list";
						}else if (data == 'notDelete'){
							layer.msg('有订单未完成！', {icon: 7,anim:6});
							return ;
						}
						else layer.msg('删除失败！', {icon: 7,anim:6});
					}
				})
			}

		}
		//删除全部订单
		function deleteAll() {
			if (confirm('确定清空？')){
				$.ajax({
					url:contextPath + "/order/deleteAll",
					method:"post",
					// data:{"ids":ids.substring(0,ids.length-1)},
					success:function (data) {
						if (data == 'success'){
							layer.msg('删除成功！');
							window.location.href = contextPath + "/order/list";
						}else if (data == 'notDelete'){
							layer.msg('有订单未完成！', {icon: 7,anim:6});
							return ;
						}
						else layer.msg('删除失败！', {icon: 7,anim:6});
					}
				})
			}


		}

		$(function () {
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(1,''))
		})

		function queryData(page, pageSize,orderNum,tradeStatus,orderBy,startTime,endTime) {
			var query = {};
			query.page = page;
			query.pageSize = pageSize == '' ? 4 : pageSize;
			query.orderNum = orderNum == undefined ? '' : orderNum;
			query.tradeStatus = tradeStatus == undefined ? '' : tradeStatus;
			query.orderBy = orderBy == undefined ? '' : orderBy;
			query.startTime = startTime == undefined ? '' : startTime;
			query.endTime = endTime == undefined ? '' : endTime;
			return query;
		}

		function loadData(page,pageSize) {
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(page,pageSize))
		}

		//跳转到指定页
		function goPage(pageSize,pages) {
			var inputPage = $("#inputPage").val();
			//数字正则
			var reg = new RegExp("^[0-9]*$");
			if (!reg.test(inputPage)){
				layer.msg('请输入正整数！', {icon: 7,anim:6});
				return;
			}
			if (inputPage==''){
				layer.msg('请输入页码', {icon: 7,anim:6});
				return;
			}
			if (inputPage > pages) {//如果输入的页数大于总页数
				layer.msg('超出总页数！总页数：'+pages, {icon: 7,anim:6});
				return;
			}
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(inputPage,pageSize))
		}

		//修改指定每页显示的记录数
		function loadDataBySize(obj) {
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(1,obj.value))
		}

		//查询
		function queryOrderData() {
			var queryOrderNum = $("#queryOrderNum").val();
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(1,'',queryOrderNum));
		}
		function queryOrderStatus(val) {
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(1,'','',val));
		}
		function queryOrderBy(val) {
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(1,'','','',val));
		}
		function queryByDate() {
			var begin = $('#datetimepicker').val();
			var end = $('#datetimepicker2').val();
			$("#orderData").load(contextPath + "/order/getOrderListData",queryData(1,'','','','',begin,end));
		}

		//根据图书名搜索
		function searchBookName() {
			var inputBookName = $("#inputBookName").val();
			if (inputBookName != ''){
				window.location.href = contextPath + "/book/searchBook?inputBookName=" + inputBookName;
			}else layer.msg('查找内容不为空！', {icon: 7,anim:6});

		}
		//订单支付支付
		function orderPay(orderId){

			layer.msg('正在跳转至支付页面...', {
				icon: 16,
				time: 2000 //2秒关闭（如果不配置，默认是3秒）
			}, function(){
/*				$.ajax({
					url:contextPath + "/order/orderPay",
					method:"get",
					 data:{"orderId":orderId},
					success:function (data) {

					}
				})*/
				location.href = contextPath +"/order/orderPay?orderId=" + orderId;
			});
		}

		//取消订单
		function cancelOrder(orderId){
			layer.confirm('确定取消该订单？', {
				icon:3,
				btn: ['确定', '取消']
			}, function(index, layero){
				//按钮【按钮一】的回调
				$.ajax({
					url:contextPath + "/order/cancelOrder",
					data:{"orderId":orderId},
					type:"post",
					success:function (data) {
						if (data=="success"){
							layer.msg('取消订单成功！', {
								icon: 1,
								time: 2000 //2秒关闭（如果不配置，默认是3秒）
							}, function(){
								location.href = contextPath +"/order/list";
							});
						}
						else if (data == "cancelFail") layer.msg("取消失败！");
						else if (data == "emptyOrder") layer.msg("查无此订单！");
					}
				})
			}, function(index){
				return ;
			});
		}

		//收货
			function takeOver(orderId) {
				layer.confirm('确定收货？', {
					icon:3,
					btn: ['确定', '取消']
				}, function(index, layero){
					//按钮【按钮一】的回调
					$.ajax({
						url:contextPath + "/order/takeOver",
						type:"post",
						data:{"orderId":orderId},
						success:function (data) {
							if (data == 'success'){
								location.reload();
							}else {
								layer.msg('发货失败')
							}
						}
					})
				}, function(index){
					return ;
				});
			}
		//点击图标切换
		function changeIcon(index) {
			x = document.getElementById('icon'+index).className;
			console.log(x)
			if(x=='layui-icon layui-icon-down'){
				document.getElementById('icon'+index).className = 'layui-icon layui-icon-up';
			}else{
				document.getElementById('icon'+index).className = 'layui-icon layui-icon-down';
			}
		}
		</script>

	</body>
</html>